<!-- 头部 -->
@layout("/layout/header.html"){
@}
<div class="am-cf admin-main ">
<!-- 左侧菜单-->
@layout("/layout/sidebar.html",{}){ 
@}
	<div class="admin-content">
		<div class="am-cf am-padding">
			<div class="am-fl am-cf">
				<strong class="am-text-primary am-text-lg">首页</strong> / <small>数据库管理</small>
			</div>
		</div>

		<div class="am-g">
			<div class="am-u-sm-12 am-u-md-6">
				<div class="am-btn-toolbar">
					<div class="am-btn-group am-btn-group-xs">
						<a type="button" class="am-btn am-btn-primary" action="add"><span class="am-icon-plus"></span> 新增</a>
						<!--  <a type="button" class="am-btn am-btn-success"  action="update"><span class="am-icon-plus"></span> 修改</a> -->
						<a type="button" class="am-btn am-btn-danger" action="deleteAll"><span class="am-icon-trash-o"></span> 删除</a>
					</div>
				</div>
			</div>

			<div class="am-u-sm-12 am-u-md-3">
				<div class="am-input-group am-input-group-sm">
					<input type="text" class="am-form-field"> <span
						class="am-input-group-btn">
						<button class="am-btn am-btn-default" type="button">搜索</button>
					</span>
				</div>
			</div>
		</div>

		<div class="am-g">
			<div class="am-u-sm-12">
				<form class="am-form" id="queryForm" action="${ctxPath}/db"
					method="post">
					<table
						class="am-table am-table-striped am-table-hover table-main table">
						<thead>
							<tr>
								<th class="table-check"><input type="checkbox" /></th>
								<th>项目名称</th>
								<th>数据库类型</th>
								<th>驱动</th>
								<th>链接参数</th>
								<th>用户名</th>
								<th>密码</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>

							@for(item in page.list){
							<tr>
								<td><input type="checkbox" /></td>
								<td>${ item.proName!}</td>
								<td>${ item.dbType!}</td>
								<td>${ item.driver!}</td>
								<td>${ item.url!}</td>
								<td>${ item.userName!}</td>
								<td>${ item.passWord!}</td>
								<td>
									<div class="am-btn-toolbar">
										<div class="am-btn-group am-btn-group-xs">
											<a class="am-btn am-btn-secondary am-round" key="${ item.id!}" action="update"><span class="am-icon-edit"></span> 编辑</a> 
											<a class="am-btn am-btn-danger am-round" key="${ item.id!}" action="delete"><span class="am-icon-trash"></span> 删除</a>
										</div>
									</div>
								</td>
							</tr>
							@}

						</tbody>
					</table>
					@include("/layout/_pagination.html",{page:page}){}
				</form>
			</div>

		</div>
	</div>

	<!-- content end -->

	<div class="am-popup" id="my-popup">
		<div class="am-popup-inner">
			<div class="am-popup-hd">
				<h4 class="am-popup-title">新增</h4>
				<span data-am-modal-close class="am-close">&times;</span>
			</div>
			<div class="am-popup-bd">
				<div>
					<form action="" class="am-form" id="doc-vld-msg">
						<div class="am-form-group">
							<label for="doc-select-1-1">项目</label> 
							<select id="doc-select-1-1" name="proId" required></select> <span class="am-form-caret"></span>
						</div>

						<div class="am-form-group">
							<label for="doc-vld-dbType-2-1">数据库类型：</label> 
							<input type="text" id="doc-vld-dbType-2-1" name="dbType" placeholder="输入数据库类型" required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-driver-2-1">驱动：</label> 
							<input type="text" id="doc-vld-driver-2-1" name="driver" placeholder="输入驱动" required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-url-2-1">链接参数：</label> 
							<input type="text" id="doc-vld-url-2-1" name="url" placeholder="输入链接参数" required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-userName-2-1">用户名：</label> 
							<input type="text" id="doc-vld-userName-2-1" name="userName" placeholder="输入用户名" required />
						</div>

						<div class="am-form-group">
							<label for="doc-vld-passWord-2-1">密码：</label> 
							<input type="text" id="doc-vld-passWord-2-1" name="passWord" placeholder="输入密码" required />
						</div>

						<div class="am-form-group">
							<div class="am-u-sm-5 am-u-sm-push-5">
								<input type="hidden" name="id" id="id" /> <a
									class="am-btn am-btn-primary save">提交</a> <a
									class="am-btn am-btn-danger quite">取消</a>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- model end -->
</div>
<!-- 底部 -->
@layout("/layout/footer.html"){ 
@}
<script>
$(function (){
	var $modal = $('#my-popup'),$form = $("#doc-vld-msg"),action="",$table = $('.table');
	Utils.setOptions("${ctxPath}/project/findCategory", '',"#doc-select-1-1");
	
	//表单验证
 	$('#doc-vld-msg').validator({
	    onValid: function(validity) {
	      $(validity.field).closest('.am-form-group').find('.am-alert').hide();
	    },
	    onInValid : function(validity) {
								var $field = $(validity.field);
								var $group = $field.closest('.am-form-group');
								var $alert = $group.find('.am-alert');
								// 使用自定义的提示信息 或 插件内置的提示信息
								var msg = $field.data('validationMessage')
										|| this.getValidationMessage(validity);
								if (!$alert.length) {
									$alert = $(
											'<div class="am-alert am-alert-danger"></div>')
											.hide().appendTo($group);
								}
								$alert.html(msg).show();
							}
						});

		//按钮点击
		$('.am-btn-group-xs a').click(function() {
			var ac = $(this).attr('action');
			var key = $(this).attr('key');
			action = ac;

			if ('add' == ac) {
				$modal.modal('open');
			} else if ('update' == ac) {
				$modal.modal('open');
				$.post("${ctxPath}/db/view", {
					id : key
				}, function(rs) {
					if (rs) {
						Utils.setForm($form, rs);
					} else {
						alert('请选择一项！');
					}
				});

			} else if ('delete' == ac) {
				var param = {
					id : key
				};
				save(action, param);
			} else if ('deleteAll' == ac) {

			}
		});

		//关闭窗口
		$('.quite').click(function() {
			$modal.modal('close');
		});

		//保存
		$(".save").click(function() {
			if (action) {
				var id = $("#id").val();
				if (!id) {
					$("#id").val("-1");
				}
				var param = $form.serialize();
				save(action, param);
			}
		});

		function save(action, parame) {
			$.post("${ctxPath}/db/save/" + action, parame, function(rs) {
				if (rs && 200 == rs.status) {
					location.reload();
				} else {
					alert(rs.message);
				}
			});
		}

	})
</script>

